<template>
    <div style="margin-bottom: 60px;">
        <div class="dl" v-if="dlz == false">
            <img class="img"
                src="https://img-qn.51miz.com/preview/photo/00/01/51/26/P-1512602-6C1160D0O.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420"
                alt="">
            <div class="dlmb">
                <div class="yq" v-if="dlzt == false" @click="dlzt = true">
                    <div>登录</div>
                    <div>ONE一个</div>
                </div>

                <van-form @submit="onSubmit" v-if="dlzt">
                    <van-cell-group inset>
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>

                <div class="djzc">
                    <div>还没有账号？点击</div>
                    <div>注册</div>
                </div>
                <div class="wyyd">
                    <svg t="1676817673021" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4514" width="16" height="16">
                        <path
                            d="M511.990279 128.036072c-211.837686 0-383.589398 171.908278-383.589398 383.969045 0 212.050534 171.751712 383.958812 383.589398 383.958812 211.874525 0 383.607818-171.908278 383.607818-383.958812C895.598096 299.94435 723.864804 128.036072 511.990279 128.036072zM727.76053 407.098835 468.846666 666.256246c-10.225899 10.215666-26.78197 10.215666-37.006845 0L296.21798 530.488073c-10.206456-10.205433-10.206456-26.79118 0-37.006845 10.225899-10.235109 26.78197-10.235109 36.988426 0l117.136837 117.228935 240.430908-240.647849c10.207479-10.225899 26.761504-10.225899 36.987403 0C737.966986 380.288213 737.966986 396.863726 727.76053 407.098835z"
                            fill="#2c2c2c" p-id="4515"></path>
                    </svg>我已阅读并同意
                    <div>《用户服务协议》</div>
                    和
                    <div>《隐私协议》</div>
                </div>
            </div>

            <div class="qtdl">其他登录方式</div>

            <div class="dxtb">
                <svg t="1676818049569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="5678" width="30" height="30">
                    <path
                        d="M684.2624 336.639078c10.256998 0 20.405555 0.753152 30.472294 1.873715C687.354982 211.026227 551.049933 116.304896 395.467162 116.304896c-173.940736 0-316.424704 118.557184-316.424704 269.103923 0 86.8992 47.403622 158.259405 126.61801 213.608038l-31.648051 95.184896 110.615859-55.468339c39.581082 7.834419 71.337677 15.888896 110.837965 15.888896 9.929523 0 19.775181-0.490189 29.539021-1.257677-6.182093-21.154816-9.763738-43.312435-9.763738-66.302054C415.242342 448.825139 533.955994 336.639078 684.2624 336.639078zM514.125517 250.849178c23.825613 0 39.60873 15.673958 39.60873 39.484314 0 23.715123-15.783117 39.607091-39.60873 39.607091-23.716147 0-47.513088-15.891968-47.513088-39.607091C466.612429 266.522112 490.40937 250.849178 514.125517 250.849178zM292.671693 329.939456c-23.713075 0-47.648154-15.891968-47.648154-39.607091 0-23.810253 23.934054-39.484314 47.648154-39.484314 23.715123 0 39.499264 15.673958 39.499264 39.484314C332.170957 314.04759 316.386816 329.939456 292.671693 329.939456zM973.059686 583.260979c0-126.504141-126.593434-229.620736-268.773478-229.620736-150.553088 0-269.128499 103.116493-269.128499 229.620736 0 126.72215 118.576538 229.620736 269.128499 229.620736 31.510938 0 63.294157-7.945933 94.942208-15.877632l86.79127 47.525376-23.796941-79.073894C925.73696 717.806285 973.059686 654.621286 973.059686 583.260979zM617.027379 543.668224c-15.755469 0-31.648051-15.673958-31.648051-31.661056 0-15.766118 15.892582-31.643648 31.648051-31.643648 23.934054 0 39.60873 15.877632 39.60873 31.643648C656.636109 527.994266 640.961434 543.668224 617.027379 543.668224zM791.077581 543.668224c-15.647027 0-31.430144-15.673958-31.430144-31.661056 0-15.766118 15.783117-31.643648 31.430144-31.643648 23.715123 0 39.605658 15.877632 39.605658 31.643648C830.684262 527.994266 814.793626 543.668224 791.077581 543.668224z"
                        fill="#272636" p-id="5679"></path>
                </svg>
                <svg t="1676818074034" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="7684" width="30" height="30">
                    <path
                        d="M721.989632 468.033536c-33.468416-6.36928-17.53088-24.694784-17.53088-24.694784s32.671744-54.194176-6.381568-93.247488c-48.607232-48.607232-166.549504 6.383616-166.549504 6.383616-44.627968 13.549568-32.669696-6.383616-26.302464-41.44128 0-40.644608-14.342144-109.96736-134.674432-68.524032-119.535616 40.63232-222.337024 184.875008-222.337024 184.875008-71.723008 95.62112-62.1568 168.937472-62.1568 168.937472 17.528832 163.364864 191.258624 207.992832 325.933056 218.353664 141.85472 11.159552 333.099008-48.605184 391.272448-172.136448C861.442048 523.024384 755.456 474.417152 721.989632 468.033536L721.989632 468.033536zM422.356992 773.251072c-141.058048 6.367232-255.00672-64.54272-255.00672-158.58688 0-94.029824 113.948672-168.93952 255.00672-175.321088 141.04576-6.367232 255.004672 51.009536 255.004672 145.03936C677.361664 678.428672 563.402752 766.869504 422.356992 773.251072L422.356992 773.251072z"
                        fill="#050407" p-id="7685"></path>
                    <path
                        d="M394.463232 500.717568c-141.85472 16.734208-125.917184 149.815296-125.917184 149.815296s-0.796672 41.428992 38.258688 62.951424c82.88256 44.623872 168.142848 17.528832 211.175424-37.462016C561.012736 620.251136 536.303616 484.780032 394.463232 500.717568L394.463232 500.717568zM358.59456 687.183872c-26.28608 3.18464-47.81056-11.956224-47.81056-34.260992 0-22.319104 19.134464-45.422592 45.422592-47.81056 30.281728-3.198976 50.212864 14.342144 50.212864 36.651008C406.419456 664.082432 384.897024 683.999232 358.59456 687.183872L358.59456 687.183872zM442.27584 616.255488c-9.568256 6.383616-19.918848 5.588992-24.70912-2.387968-5.572608-7.962624-3.18464-20.713472 5.586944-27.09504 10.350592-7.962624 21.510144-5.574656 26.300416 2.400256C454.230016 597.133312 450.250752 609.091584 442.27584 616.255488L442.27584 616.255488z"
                        fill="#050407" p-id="7686"></path>
                    <path
                        d="M791.324672 410.669056c11.145216 0 20.713472-8.771584 22.306816-19.931136 0-0.796672 0.796672-1.591296 0.796672-2.387968 16.734208-155.389952-127.496192-128.305152-127.496192-128.305152-12.752896 0-23.115776 10.36288-23.115776 23.117824 0 12.750848 10.364928 23.115776 23.115776 23.115776 103.583744-23.115776 80.480256 81.276928 80.480256 81.276928C767.410176 400.306176 777.775104 410.669056 791.324672 410.669056L791.324672 410.669056z"
                        fill="#050407" p-id="7687"></path>
                    <path
                        d="M773.781504 139.685888c-49.403904-11.941888-101.195776-1.970176-115.539968 1.214464-0.796672 0-2.404352 0.600064-3.198976 0.600064-0.796672 0-0.796672 0.698368-0.796672 0.698368-14.34624 3.995648-24.696832 17.487872-24.696832 32.628736 0 18.325504 15.140864 33.452032 33.466368 33.452032 0 0 18.325504-2.402304 31.0784-7.192576 11.956224-4.775936 115.554304-3.198976 167.346176 82.868224 27.89376 62.951424 11.956224 105.189376 10.36288 112.367616 0 0-7.17824 15.939584-7.17824 32.673792 0 18.325504 15.140864 31.049728 34.275328 31.049728 15.142912 0 28.690432 0.755712 31.873024-27.916288l0.796672 0C986.56256 235.52 863.830016 160.413696 773.781504 139.685888L773.781504 139.685888z"
                        fill="#050407" p-id="7688"></path>
                </svg>
                <svg t="1676818082966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="8765" width="30" height="30">
                    <path
                        d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                        p-id="8766" fill="#2c2c2c"></path>
                </svg>
            </div>

        </div>

        <div v-if="dlz">
            <div>
                <div style="position: relative;">
                    <img class="img"
                        src="https://img-qn.51miz.com/preview/photo/00/01/51/26/P-1512602-6C1160D0O.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420"
                        alt="">
                    <div class="tpzx">
                        <div class="imgtp"><img
                                src="https://img-qn.51miz.com/preview/photo/00/01/51/26/P-1512602-6C1160D0O.jpg!/quality/90/unsharp/true/compress/true/fwfh/640x420"
                                style="height: 50px;width: 50px;border-radius: 100%;object-fit: cover;
                                      object-position: center;" alt=""></div>
                        <div style="margin-left: 10px;color: white;">lbw</div>
                    </div>
                    <div class="tpys"><svg t="1676968612199" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4073" width="20" height="20">
                            <path
                                d="M846.367347 820.244898H177.632653c-45.97551 0-83.591837-37.616327-83.591837-83.591837V287.346939c0-45.97551 37.616327-83.591837 83.591837-83.591837h668.734694c45.97551 0 83.591837 37.616327 83.591837 83.591837v449.306122c0 45.97551-37.616327 83.591837-83.591837 83.591837zM177.632653 245.55102c-22.987755 0-41.795918 18.808163-41.795918 41.795919v449.306122c0 22.987755 18.808163 41.795918 41.795918 41.795919h668.734694c22.987755 0 41.795918-18.808163 41.795918-41.795919V287.346939c0-22.987755-18.808163-41.795918-41.795918-41.795919H177.632653z"
                                fill="#333333" p-id="4074"></path>
                            <path
                                d="M512 610.742857c-21.420408 0-42.840816-8.359184-59.036735-24.555102L121.730612 254.955102c-8.359184-8.359184-8.359184-21.420408 0-29.779592 8.359184-8.359184 21.420408-8.359184 29.779592 0l331.232653 331.232653c16.195918 16.195918 42.840816 16.195918 59.036735 0l328.620408-328.620408c8.359184-8.359184 21.420408-8.359184 29.779592 0 8.359184 8.359184 8.359184 21.420408 0 29.779592l-328.620408 328.620408c-16.718367 16.718367-38.138776 24.555102-59.559184 24.555102z"
                                fill="#333333" p-id="4075"></path>
                        </svg></div>
                </div>

                <van-row justify="space-between" style="box-sizing: border-box;padding: 10px;">
                    <van-col span="12" style="font-size: 14px;">我的小记</van-col>
                    <van-col span="12"
                        style="display: flex;justify-content: flex-end;font-size: 12px;color: #cdcdcd;">全部</van-col>
                </van-row>


                <div class="zzxj">
                    <div class="zzxjlm">
                        <div style="font-size: 14px;color: #aaaaaa;"><svg style="box-sizing: border-box;padding-right: 5px;"
                                t="1676969390913" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5452" width="14" height="14">
                                <path
                                    d="M940.64 82.56C888 29.984 818.688 0 750.368 0c-57.632 0-110.688 21.376-149.44 60.064l-155.744 156.928c-0.48 0.448-1.024 0.736-1.504 1.216-0.256 0.256-0.416 0.608-0.672 0.832l0.064 0.064L112.544 552.192a128.736 128.736 0 0 0-32.416 54.56L4.96 879.008C4.896 879.744 0 901.12 0 912 0 973.824 50.208 1024 112.128 1024c12.32 0 36.16-5.888 37.024-6.016l271.296-71.328a128.672 128.672 0 0 0 54.56-32.512l488.416-492.256c88.832-88.896 78.816-237.888-22.784-339.328zM512.448 761.44a260.64 260.64 0 0 0-23.008-84.064l302.56-302.528c18.496 58.432 8.992 119.552-31.552 160.128-0.256 0.256-0.576 0.416-0.8 0.672l0.448 0.416-247.296 249.28c0-7.968 0.384-15.776-0.352-23.904z m-39.072-113.248c-11.936-19.616-25.504-38.56-42.304-55.328-19.552-19.552-41.984-34.88-65.408-47.744l305.024-305.024a222.048 222.048 0 0 1 67.136 46.016 223.232 223.232 0 0 1 40.992 56.672l-305.44 305.408z m-137.824-118.208a255.232 255.232 0 0 0-91.776-19.168l246.496-248.384c37.728-36.8 92.672-47.392 146.784-33.984l-301.504 301.536zM133.344 955.936c-3.488 0.8-14.336 3.552-21.696 4.064A48.16 48.16 0 0 1 64 912c0.384-5.376 2.528-14.624 3.264-17.984l33.696-122.048c36.576-0.992 75.936 13.248 106.88 44.256 31.424 31.36 46.208 71.488 44.608 108.512l-119.104 31.2z m150.624-39.552c-0.768-42.944-18.24-87.616-53.504-122.816-33.344-33.376-76.992-52.64-120.512-54.368l31.872-115.424c2.304-7.68 6.88-15.264 12.512-21.888 64.192-45.952 162.912-32.384 231.488 36.256 72.544 72.512 83.744 178.752 27.872 242.176a63.04 63.04 0 0 1-11.488 4.992l-118.24 31.072z m634.144-539.68l-53.888 54.304c0-7.232 0.864-14.176 0.192-21.568-5.632-61.92-34.496-121.792-81.376-168.608-52.128-52.16-121.248-82.08-189.696-82.272l52.992-53.44C672.864 78.656 709.888 64 750.368 64c51.488 0 104.384 23.296 145.056 63.84 38.176 38.112 60.928 85.472 64.192 133.376 3.008 44.704-11.744 85.696-41.504 115.488z"
                                    fill="#8a8a8a" p-id="5453"></path>
                            </svg>制作小记</div>
                        <div style="font-size: 12px;color: #aaaaaa;">记录你此刻的想法</div>
                    </div>
                </div>

            </div>

            <div style="font-size: 12px;margin: 10px 0;margin-left: 10px;">我的收藏</div>

            <div class="wgicon">
                <div>
                    <div><svg t="1676969782033" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6903" width="30" height="30">
                            <path
                                d="M928 1024h-832a32 32 0 0 1-32-32V32a32 32 0 0 1 32-32h832a32 32 0 0 1 32 32v960a32 32 0 0 1-32 32zM128 960h768V64H128z"
                                fill="#111111" p-id="6904"></path>
                            <path
                                d="M736 256h-128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM736 448h-128a32 32 0 0 1 0-64h128a32 32 0 0 1 0 64zM736 640h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM736 832h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64zM480 448h-192a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32zM320 384h128V256H320z"
                                fill="#111111" p-id="6905"></path>
                        </svg></div>
                    <div style="font-size: 12px;">图文</div>
                </div>
                <div>
                    <div><svg t="1676969844139" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8309" width="30" height="30">
                            <path
                                d="M251.25 452.4l521.5 0 0 29.8-521.5 0 0-29.8ZM251.25 616.301l521.5 0 0 29.8-521.5 0 0-29.8ZM251.25 780.2l253.3 0 0 29.801-253.3 0 0-29.801ZM884.457 301.407l0-0.189-0.189 0L649.214 65.204 649.214 65l-29.8 0L610 65 139.5 65l0 894 744.957 0L884.457 340.592l0-39.068 0.043-0.059L884.457 301.407zM649.214 107.445l195.155 195.94-195.155-0.015L649.214 107.445zM854.656 929.2 169.3 929.2 169.3 94.8l450.114 0 0 208.571L619.414 318.3l0 14.9 235.242-0.015L854.656 929.2z"
                                fill="#272636" p-id="8310"></path>
                        </svg></div>
                    <div style="font-size: 12px;">文章</div>
                </div>
                <div>
                    <div><svg t="1676969877773" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9551" width="30" height="30">
                            <path
                                d="M936.11008 828.50816h-29.02016V127.15008H278.272v701.35808H249.2416V98.12992h686.86848z"
                                p-id="9552"></path>
                            <path
                                d="M194.9696 936.13056a81.23392 81.23392 0 0 1-25.69216-4.37248 103.40352 103.40352 0 0 1-69.8368-115.05664c7.20896-44.56448 46.26432-92.18048 134.22592-92.18048v29.02016c-59.2384 0-98.70336 25.35424-105.5744 67.79904-5.04832 31.19104 10.62912 69.67296 50.35008 82.88256 15.14496 5.02784 28.66176 3.36896 40.18176-4.94592 17.92-12.92288 30.42304-42.02496 30.42304-70.7584h29.0304c0 38.67648-16.67072 75.70432-42.47552 94.3104-12.25728 8.82688-26.01984 13.30176-40.63232 13.30176zM852.81792 936.13056a81.23392 81.23392 0 0 1-25.69216-4.37248 103.424 103.424 0 0 1-69.84704-115.05664c7.2192-44.56448 46.27456-92.18048 134.22592-92.18048v29.02016c-59.2384 0-98.70336 25.35424-105.5744 67.79904-5.04832 31.19104 10.61888 69.67296 50.35008 82.88256 15.12448 5.0176 28.65152 3.36896 40.18176-4.93568 17.90976-12.93312 30.43328-42.02496 30.43328-70.76864h29.02016c0 38.67648-16.67072 75.70432-42.46528 94.3104-12.25728 8.82688-26.01984 13.30176-40.63232 13.30176zM265.80992 291.16416h655.36v30.72h-655.36z"
                                p-id="9553"></path>
                        </svg></div>
                    <div style="font-size: 12px;">音乐</div>
                </div>
                <div>
                    <div><svg t="1676969910008" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10754" width="30" height="30">
                            <path
                                d="M824.7 140.1H198c-74.3 0-134.7 60.4-134.7 134.7v474.4c0 74.3 60.4 134.7 134.7 134.7h626.7c74.3 0 134.7-60.4 134.7-134.7V274.8c-0.1-74.2-60.5-134.7-134.7-134.7zM117.2 538.9H183v95.6h-65.8v-95.6z m65.7-53.9h-65.8v-95.6h65.8V485z m53.9-291h549v636h-549V194z m668.7 291h-65.8v-95.6h65.8V485z m-65.8 53.9h65.8v95.6h-65.8v-95.6z m65.8-264.1v60.8h-65.8V195.5c37.4 7 65.8 39.9 65.8 79.3z m-722.6-79.3v140.1h-65.8v-60.8c0.1-39.4 28.4-72.3 65.8-79.3z m-65.7 553.7v-60.8H183v140.2c-37.5-7.1-65.8-40-65.8-79.4z m722.5 79.3V688.4h65.8v60.8c0 39.4-28.4 72.3-65.8 79.3z"
                                fill="#4D4D4D" p-id="10755"></path>
                            <path
                                d="M641 457.7L444.3 344.1c-19.6-11.3-43.1-11.3-62.7 0s-31.4 31.6-31.4 54.3v227.2c0 22.7 11.7 43 31.4 54.3 9.8 5.7 20.6 8.5 31.4 8.5 10.8 0 21.5-2.8 31.4-8.5L641 566.3c19.6-11.3 31.4-31.6 31.4-54.3 0-22.7-11.7-43-31.4-54.3z m-26.9 62L417.4 633.3c-3.8 2.2-7.2 1-8.9 0-1.7-1-4.4-3.2-4.4-7.7V398.4c0-4.4 2.8-6.7 4.4-7.7 1-0.6 2.5-1.2 4.5-1.2 1.3 0 2.8 0.3 4.4 1.2l196.8 113.6c3.8 2.2 4.4 5.8 4.4 7.7-0.1 1.9-0.6 5.4-4.5 7.7z"
                                fill="#4D4D4D" p-id="10756"></path>
                        </svg></div>
                    <div style="font-size: 12px;">影视</div>
                </div>
                <div>
                    <div><svg t="1676969933450" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="11423" width="30" height="30">
                            <path
                                d="M818.844171 512.222393h-153.533282c-14.329773 0-25.58888-11.770885-25.58888-25.58888s11.770885-25.58888 25.58888-25.588881h153.533282c14.329773 0 25.58888 11.770885 25.588881 25.588881 0 14.329773-11.259107 25.58888-25.588881 25.58888z"
                                fill="" p-id="11424"></path>
                            <path
                                d="M562.955368 486.633513m-25.588881 0a25.58888 25.58888 0 1 0 51.177761 0 25.58888 25.58888 0 1 0-51.177761 0Z"
                                fill="" p-id="11425"></path>
                            <path
                                d="M307.066564 768.111196c-84.443305 0-153.533282-69.089977-153.533282-153.533282s69.089977-153.533282 153.533282-153.533282 153.533282 69.089977 153.533282 153.533282-69.089977 153.533282-153.533282 153.533282z m0-255.888803c-56.295537 0-102.355521 46.059985-102.355521 102.355521s46.059985 102.355521 102.355521 102.355522 102.355521-46.059985 102.355522-102.355522-46.059985-102.355521-102.355522-102.355521z"
                                fill="" p-id="11426"></path>
                            <path
                                d="M895.610812 1024H127.944402c-70.62531 0-127.944402-57.319092-127.944402-127.944402V333.10023c0-70.62531 57.319092-127.944402 127.944402-127.944401h767.66641c70.62531 0 127.944402 57.319092 127.944402 127.944401v562.955368c0 70.62531-57.319092 127.944402-127.944402 127.944402zM127.944402 256.333589c-42.477541 0-76.766641 34.2891-76.766641 76.766641v562.955368c0 42.477541 34.2891 76.766641 76.766641 76.766641h767.66641c42.477541 0 76.766641-34.2891 76.766641-76.766641V333.10023c0-42.477541-34.2891-76.766641-76.766641-76.766641H127.944402z"
                                fill="" p-id="11427"></path>
                            <path
                                d="M818.844171 768.111196h-153.533282c-14.329773 0-25.58888-11.770885-25.58888-25.58888 0-14.329773 11.770885-25.58888 25.58888-25.58888h153.533282c14.329773 0 25.58888 11.770885 25.588881 25.58888 0 14.329773-11.259107 25.58888-25.588881 25.58888z"
                                fill="" p-id="11428"></path>
                            <path
                                d="M562.955368 742.522316m-25.588881 0a25.58888 25.58888 0 1 0 51.177761 0 25.58888 25.58888 0 1 0-51.177761 0Z"
                                fill="" p-id="11429"></path>
                            <path
                                d="M127.944402 256.333589c-9.723775 0-18.935771-5.629554-23.029993-14.84155-6.141331-12.79444-0.511778-28.147768 12.282663-34.2891l435.010966-204.711043c12.79444-6.141331 28.147768-0.511778 34.2891 12.282663 6.141331 12.79444 0.511778 28.147768-12.282663 34.2891l-435.010966 204.711042c-4.094221 1.535333-7.676664 2.558888-11.259107 2.558888z"
                                fill="" p-id="11430"></path>
                        </svg></div>
                    <div style="font-size: 12px;">电台</div>
                </div>
            </div>

            <div style="height: 10px;background-color: #eeeeee;margin: 10px 0;"></div>

            <div style="display: flex;" @click="djgz">
                <div style="width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;"><svg
                        t="1676970304632" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12863" width="25" height="25">
                        <path
                            d="M512 85.333333c129.6 0 234.666667 105.066667 234.666667 234.666667 0 84.256-44.394667 158.133333-111.072 199.52a425.28 425.28 0 0 1 152.853333 83.466667 32 32 0 1 1-41.493333 48.736A361.045333 361.045333 0 0 0 512 565.333333c-188.672 0-345.429333 144.672-361.344 331.413334a32 32 0 0 1-63.765333-5.429334c15.114667-177.322667 138.048-322.346667 301.546666-371.786666C321.76 478.165333 277.333333 404.266667 277.333333 320c0-129.6 105.066667-234.666667 234.666667-234.666667z m415.946667 627.381334l1.066666 1.013333a29.824 29.824 0 0 1 0 43.413333l-162.261333 152.96a31.925333 31.925333 0 0 1-22.762667 8.704 31.925333 31.925333 0 0 1-22.773333-8.704l-93.184-87.84a29.824 29.824 0 0 1 0-43.413333l1.077333-1.013333a32 32 0 0 1 43.904 0l70.976 66.901333 140.053334-132.021333a32 32 0 0 1 43.904 0zM512 149.333333c-94.261333 0-170.666667 76.405333-170.666667 170.666667s76.405333 170.666667 170.666667 170.666667 170.666667-76.405333 170.666667-170.666667-76.405333-170.666667-170.666667-170.666667z"
                            fill="#000000" p-id="12864"></path>
                    </svg></div>
                <div style="flex: 1;border-bottom: 1px solid #e9e9e9;display: flex;">
                    <div style="flex: 1;display: flex;align-items: center;font-size: 12px;">我的关注</div>
                    <div
                        style="flex: 1;display: flex;justify-content: flex-end;align-items: center;box-sizing: border-box;padding-right: 10px;">
                        {{ gzsl }} <van-icon name="arrow" /></div>
                </div>
            </div>
            <div style="display: flex;">
                <div style="width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;"><svg
                        t="1676970548306" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="13806" width="25" height="25">
                        <path
                            d="M770.048 941.056H248.832c-55.296 0-100.352-45.056-100.352-100.352V227.84c0-55.296 45.056-100.352 100.352-100.352h521.216c55.296 0 100.352 45.056 100.352 100.352v613.376c0 54.784-45.056 99.84-100.352 99.84zM248.832 167.424c-33.28 0-60.416 27.136-60.416 60.416v613.376c0 33.28 27.136 60.416 60.416 60.416h521.216c33.28 0 60.416-27.136 60.416-60.416V227.84c0-33.28-27.136-60.416-60.416-60.416H248.832z"
                            fill="#666666" p-id="13807"></path>
                        <path
                            d="M614.4 351.232H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968H614.4c11.264 0 19.968 9.216 19.968 19.968s-8.704 19.968-19.968 19.968zM614.4 547.84H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968H614.4c11.264 0 19.968 9.216 19.968 19.968s-8.704 19.968-19.968 19.968zM417.792 757.76H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968h170.496c11.264 0 19.968 9.216 19.968 19.968s-9.216 19.968-19.968 19.968zM657.408 719.872h-1.024c-11.264-0.512-19.456-10.24-18.944-20.992l23.552-432.128c0.512-10.752 9.216-18.944 19.968-18.944 11.264 0 19.456 8.192 20.48 18.432 6.656 87.552 66.56 122.368 67.072 122.88 9.728 5.632 12.8 17.92 7.168 27.136-5.632 9.728-17.92 12.8-27.136 7.168-2.048-1.024-29.184-16.896-52.736-52.224l-17.92 329.216c-1.024 11.264-9.728 19.456-20.48 19.456z"
                            fill="#666666" p-id="13808"></path>
                        <path
                            d="M559.104 806.4h-6.656c-31.744-1.536-60.928-15.872-82.432-39.424-21.504-23.552-32.256-54.272-30.208-86.528 1.536-31.744 15.872-60.928 39.424-82.432 23.552-21.504 54.272-32.256 86.528-30.208 66.048 3.584 116.224 59.904 112.64 125.952-3.584 63.488-56.32 112.64-119.296 112.64z m0-198.656c-19.456 0-38.4 7.168-52.736 20.48-15.872 14.336-25.088 33.792-26.112 54.784-1.024 20.992 6.144 41.472 19.968 57.344 14.336 15.872 33.792 25.088 54.784 26.112 44.032 2.048 81.408-31.232 83.456-74.752 2.56-43.52-31.232-81.408-74.752-83.456-2.048-0.512-3.072-0.512-4.608-0.512z"
                            fill="#666666" p-id="13809"></path>
                    </svg></div>
                <div style="flex: 1;border-bottom: 1px solid #e9e9e9;display: flex;">
                    <div style="flex: 1;display: flex;align-items: center;font-size: 12px;">歌单</div>
                    <div
                        style="flex: 1;display: flex;justify-content: flex-end;align-items: center;box-sizing: border-box;padding-right: 10px;">
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <div style="display: flex;">
                <div style="width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;"><svg
                        t="1676970589510" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="14322" width="25" height="25">
                        <path
                            d="M601.82729408 389.83478415a14.0905669 14.0905669 0 0 1-14.0905669-14.09056689V183.54888284a14.0905669 14.0905669 0 1 1 28.1811338 0V375.74421726a14.0905669 14.0905669 0 0 1-14.0905669 14.09056689z"
                            fill="#333333" p-id="14323"></path>
                        <path
                            d="M771.05500427 389.83478415h-169.08680419a14.0905669 14.0905669 0 0 1 0-28.18113449h169.08680419a14.0905669 14.0905669 0 0 1 0 28.18113449zM518.1293259 385.60761382H296.34380114a14.0905669 14.0905669 0 1 1 1e-8-28.18113381h221.78552476a14.0905669 14.0905669 0 0 1 0 28.18113381zM601.82729408 532.71313374H296.34380114a14.0905669 14.0905669 0 1 1 1e-8-28.18113449h305.48349293a14.0905669 14.0905669 0 0 1 0 28.18113449zM542.22419606 677.84597379H296.34380114a14.0905669 14.0905669 0 1 1 1e-8-28.18113381h245.88039491a14.0905669 14.0905669 0 0 1 0 28.18113381zM651.00337293 828.61504074a14.0905669 14.0905669 0 0 1-9.01796262-3.38173574 14.0905669 14.0905669 0 0 1-1.69086789-19.86769979l130.33774455-153.72808606-42.27170071-35.36732325L598.58646367 770.28009327a14.0905669 14.0905669 0 1 1-21.41766167-18.17683125L716.52450985 587.10272217a14.0905669 14.0905669 0 0 1 9.58158524-4.9316983 13.24513297 13.24513297 0 0 1 10.28611456 3.38173574l63.26664573 53.54415519a14.0905669 14.0905669 0 0 1 1.54996187 19.86769912l-139.35570716 164.57782254a14.0905669 14.0905669 0 0 1-10.84973716 5.07260429z"
                            fill="#333333" p-id="14324"></path>
                        <path
                            d="M586.75038725 840.73292847a14.0905669 14.0905669 0 0 1-9.01796263-3.24083043 14.0905669 14.0905669 0 0 1-5.07260428-10.99064247v-64.25298501a14.0905669 14.0905669 0 0 1 14.09056691-14.09056757 14.0905669 14.0905669 0 0 1 14.09056759 14.09056757v47.34430499l47.48521028-8.595246a14.0905669 14.0905669 0 1 1 5.07260428 28.18113381l-64.25298568 11.55426511a7.74981207 7.74981207 0 0 1-2.39539647 0z"
                            fill="#333333" p-id="14325"></path>
                        <path
                            d="M529.26087438 859.61428833H257.87655347A38.60815367 38.60815367 0 0 1 219.2683998 821.00613465V202.99386535A38.60815367 38.60815367 0 0 1 257.87655347 164.38571167h333.66462674a42.2717014 42.2717014 0 0 1 30.01290767 12.68151036l171.05948406 173.59578584a42.2717014 42.2717014 0 0 1 12.11788773 29.73109636v181.20469192a14.0905669 14.0905669 0 0 1-28.1811345 0V380.39410423a14.0905669 14.0905669 0 0 0-4.08626434-9.86339724L601.54548277 196.79401581a14.0905669 14.0905669 0 0 0-10.00430256-4.22717034H257.87655347a10.42701985 10.42701985 0 0 0-10.42701987 10.42701988V821.00613465a10.42701985 10.42701985 0 0 0 10.42701987 10.42701988H529.26087438a14.0905669 14.0905669 0 1 1 0 28.1811338z"
                            fill="#333333" p-id="14326"></path>
                    </svg></div>
                <div style="flex: 1;border-bottom: 1px solid #e9e9e9;display: flex;">
                    <div style="flex: 1;display: flex;align-items: center;font-size: 12px;">投稿</div>
                    <div
                        style="flex: 1;display: flex;justify-content: flex-end;align-items: center;box-sizing: border-box;padding-right: 10px;">
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <div style="display: flex;">
                <div style="width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;"><svg
                        t="1676970610993" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15479" width="25" height="25">
                        <path
                            d="M944.48 552.458667l-182.357333 330.666666a73.792 73.792 0 0 1-64.565334 38.325334h-362.133333a73.792 73.792 0 0 1-64.565333-38.325334l-182.357334-330.666666a75.338667 75.338667 0 0 1 0-72.682667l182.357334-330.666667a73.792 73.792 0 0 1 64.565333-38.325333h362.133333a73.792 73.792 0 0 1 64.565334 38.325333l182.357333 330.666667a75.338667 75.338667 0 0 1 0 72.682667z m-55.989333-31.146667a10.773333 10.773333 0 0 0 0-10.378667l-182.037334-330.666666a10.517333 10.517333 0 0 0-9.205333-5.482667H335.733333a10.517333 10.517333 0 0 0-9.205333 5.482667l-182.037333 330.666666a10.773333 10.773333 0 0 0 0 10.378667l182.037333 330.666667a10.517333 10.517333 0 0 0 9.205333 5.472h361.514667a10.517333 10.517333 0 0 0 9.205333-5.472l182.037334-330.666667zM513.738667 682.666667c-94.261333 0-170.666667-76.405333-170.666667-170.666667s76.405333-170.666667 170.666667-170.666667c94.250667 0 170.666667 76.405333 170.666666 170.666667s-76.416 170.666667-170.666666 170.666667z m0-64c58.912 0 106.666667-47.754667 106.666666-106.666667s-47.754667-106.666667-106.666666-106.666667-106.666667 47.754667-106.666667 106.666667 47.754667 106.666667 106.666667 106.666667z"
                            fill="#000000" p-id="15480"></path>
                    </svg></div>
                <div style="flex: 1;border-bottom: 1px solid #e9e9e9;display: flex;">
                    <div style="flex: 1;display: flex;align-items: center;font-size: 12px;">设置</div>
                    <div
                        style="flex: 1;display: flex;justify-content: flex-end;align-items: center;box-sizing: border-box;padding-right: 10px;">
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>

            <van-button type="primary" style="width: 90%;margin: 20px 0;height: 40px;margin-left: 5%;"
                @click="djtc">退出登录</van-button>

        </div>
    </div>

    <van-tabbar v-model="active">
        <van-tabbar-item @click="djtz('/home')" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item @click="djtz('/faxian')" icon="apps-o">发现</van-tabbar-item>
        <van-tabbar-item @click="djtz('/lianzai')" icon="coupon-o">连载</van-tabbar-item>
        <van-tabbar-item @click="djtz('/wode')" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
const active = ref(3);
const router = useRouter()
const dlzt = ref(false)
const gzsl = ref(0)
const djgz = () => {
    router.push('/wdgzym')
}

function djtz(url) {
    router.push(url)
}

const username = ref('');
const password = ref('');
const dlz = ref(false);

const djtc = () => {
    localStorage.removeItem('timestamp');
    dlz.value = false
}

const onSubmit = (values) => {
    if (values['用户名'] == 'lbw' && values['密码'] == '123456') {
        showToast('成功');
        if (JSON.parse(localStorage.getItem('timestamp')) == null) {
            // 获取7天后的时间戳
            const sevenDaysLater = Date.now() + 7 * 24 * 60 * 60 * 1000;

            // 将时间戳保存到本地存储
            localStorage.setItem('timestamp', JSON.stringify(sevenDaysLater));

        } else {
            // 获取本地存储中保存的时间戳
            const timestamp = JSON.parse(localStorage.getItem('timestamp'))
            console.log(timestamp);
            // 判断当前时间是否超过7天
            if (Date.now() > timestamp) {
                // 清空本地存储中保存的时间戳
                localStorage.removeItem('timestamp');
            }
        }
        dlz.value = true
    }
    else {
        showToast('密码错误');
    }



};
onMounted(() => {
    gzsl.value = JSON.parse(localStorage.getItem('zzitemlist')).length
    // 获取本地存储中保存的时间戳
    const timestamp = JSON.parse(localStorage.getItem('timestamp'))
    console.log(timestamp);
    // 判断当前时间是否超过7天
    if (Date.now() > timestamp) {
        // 清空本地存储中保存的时间戳
        localStorage.removeItem('timestamp');
    }
    if (timestamp == null) {
        dlz.value = false
    } else {
        dlz.value = true
    }
})

</script>

<style lang="less" scoped>
.wgicon {
    display: flex;

    >div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        div {
            flex: 1;
        }

        div:nth-child(1) {
            flex: 2;
        }
    }
}

.zzxj {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 0;

    .zzxjlm {
        width: 120px;
        height: 80px;
        border: 1px dashed #d9d9d9;
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.tpzx {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;

    .imgtp {
        border-radius: 100%;
        border: 2px solid white;
    }



}

.tpys {
    position: absolute;
    right: 10px;
    top: 10px;
}

.img {
    width: 100%;
}

.dl {
    width: 100%;
    height: 100%;
}

.dlmb {
    position: relative;
    width: 100%;
    height: 413px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    >div {
        margin-bottom: 10px;
    }
}

.yq {
    width: 70px;
    height: 70px;
    background-color: black;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    div {
        color: white;
        font-size: 14px;
    }
}

.djzc {
    width: 100%;
    display: flex;
    justify-content: center;

    div:nth-child(2) {
        text-decoration: underline;
    }
}

.wyyd {
    font-size: 12px;
    color: #b9b9ba;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wyyd div {
    display: inline;
    color: black;
}

.qtdl {
    font-size: 12px;
    color: #cdccce;
    position: absolute;
    bottom: 100px;
    left: calc(50% - 36px);
}

.dxtb {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}</style>